<template>
    <div class="scheduling">
        <a-modal width="90%" :visible="visible" title="预警生产计划" @cancel="modalCancel" class="yuan-modal scheduling-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-container">

                    <div class="page-top" v-if="detailInfo&&detailInfo.id">
                        <span class="page-title">{{detailInfo.materialName}}</span>
                        <span style="margin-left:20px">计划日期：{{detailInfo.createTime}}</span>
                        <span style="margin-left:20px">标准：{{detailInfo.standard}}</span>
                    </div>

                    <a-form-model layout="inline" class="yuan-form" ref="form" :label-col="{ style: { width: '150px' } }"
                        :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">
                        <div class="form-panel">
                            <div class="form-panel-box">
                                <a-form-model-item class="yuan-form-item yuan-form-col5" label="生产计划编号">
                                    <span class="yuan-form-input">{{detailInfo.planSerial}}</span>

                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col5" label="负责人" prop="personId">
                                    <span class="yuan-form-input">{{detailInfo.person}}</span>
                                </a-form-model-item>

                                <div class="clear-both"></div>
                                <div style="display:flex;width:100%;margin-top:20px" v-for="item in planList">
                                    <div style="margin-right:20px;font-size:16px">
                                        产品大类：{{item.inventoryType}}
                                    </div>
                                    <div style="flex-grow:1;background-color: #f8f8f8;padding:10px 0">
                                        <div style="margin-bottom:10px">
                                            <span style="margin-left:20px">可供销售天数：{{item.availableSellDay}}天</span>
                                            <span style="margin-left:20px">
                                                差量：
                                                <span class="c-danger font-bignum">{{item.differenceNum}}</span>
                                                袋
                                            </span>
                                            <span style="margin-left:20px">
                                                需求量：
                                                <span class="c-warning font-bignum"> {{item.dayRequirement}}</span>
                                                袋
                                            </span>
                                            <span style="margin-left:20px">成品库存量：
                                                <span class="c-success font-bignum"> {{item.stockNum}}</span>
                                                袋
                                            </span>
                                        </div>
                                        <a-form-model-item class="yuan-form-item yuan-form-col5" label="计划包装量">
                                            <a-input suffix="袋" class="yuan-form-input" placeholder="请输入计划包装量" v-model="item.packNum" disabled></a-input>
                                            <span style="margin-left:10px">{{item.loadingQuantity}} g/袋</span>
                                        </a-form-model-item>
                                        <a-form-model-item class="yuan-form-item yuan-form-col5" label="配方颗粒(颗粒)投入量">
                                            <a-input suffix="kg" class="yuan-form-input" placeholder="请输入" disabled v-model="item.inputNum"></a-input>
                                        </a-form-model-item>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-form-model>

                    <div class="page-main">
                        <div class="panel-title yuan-title">预计排产计划分解</div>

                        <div class="table">
                            <a-table bordered :rowKey="(row)=>row.id" :data-source="pageList" :columns="columns"
                                :pagination="false" :loading="loading">
                            </a-table>
                            <template v-if="accPageList.length>0">
                                <div class="yuan-title" style="padding:10px 0;margin-top:50px">
                                    辅料
                                </div>
                                <a-table bordered :rowKey="(row)=>row.id" :data-source="accPageList" :columns="accColumns"
                                    :pagination="false" :loading="loading" v-if="accPageList.length>0">
                                </a-table>
                            </template>

                        </div>
                    </div>
                </div>
            </a-spin>
            <template slot="footer">
                <a-button @click="modalCancel">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import warningApi from "@/api/warningApi";
import { format, toDecimalNoZero } from "@/utils";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({ name: "TPL", components: {} })
export default class index extends Vue {
    @Prop({ default: "" }) visible!: boolean;
    @Prop({ default: "" }) id!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getDetailInfo();
        }
    }
    alarmData = [];
    detailInfo: any = {};
    loading = false;
    closeModal() {
        this.$emit("closeModal");
    }
    modalCancel() {
        this.closeModal();
    }

    processPlanDetailList: any[] = [];
    pageList: any[] = [];
    planList: any[] = [];
    async getDetailInfo() {
        this.loading = true;
        try {
            const res = await warningApi.getPlanDetial({ id: this.id });
            this.detailInfo = res.data || {};
            this.planList = JSON.parse(this.detailInfo.planList || "");
            this.processPlanDetailList = this.detailInfo.processPlanDetailList;
            this.getPageList();
        } finally {
            this.loading = false;
        }
    }
    pageInfo = {};
    accPageList: any[] = [];
    getPageList() {
        this.pageList = this.processPlanDetailList;
    }
    columns: any[] = [
        {
            align: "center",
            dataIndex: "planName",
            key: "planName",
            title: "计划名称",
        },
        {
            align: "center",
            dataIndex: "standard",
            key: "standard",
            title: "标准类型",
            
        },
        {
            align: "center",
            dataIndex: "inventoryType",
            key: "inventoryType",
            title: "产品大类",
        },
        {
            align: "center",
            dataIndex: "prodNum",
            key: "prodNum",
            title: "预计生产数量",
            customRender: (text: string, record: any, index: number) => {
                if (record.planName === "包装计划") {
                    return toDecimalNoZero(record.prodNum) + "袋";
                } else {
                    return toDecimalNoZero(record.prodNum) + "kg";
                }
            },
        },
        {
            align: "center",
            dataIndex: "inputNum5",
            key: "inputNum5",
            title: "生产后可销售天数",
        },
        {
            align: "center",
            dataIndex: "materialName1",
            key: "materialName1",
            title: "投料类别",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    包装计划: "带包装成品",
                    制剂计划: "半成品",
                    提取计划: "半成品",
                    饮片计划: "原料",
                };
                return data[record.planName];
            },
        },
        {
            align: "center",
            dataIndex: "materialType",
            key: "materialType",
            title: "投料分类",
        },
        {
            align: "center",
            dataIndex: "materialName",
            key: "materialName",
            title: "投料品名",
        },
        {
            align: "center",
            dataIndex: "inputNum",
            key: "inputNum",
            title: "预计投料数量(kg)",
        },
        {
            align: "center",
            dataIndex: "needNum",
            key: "needNum",
            title: "实际投料数量(kg)",
            customRender: (text: string, record: any, index: number) => {
                return toDecimalNoZero(Number(record.inputNum)-Number(record.needNum));
            },
        },
    ];
}
</script>

<style lang="scss">
.scheduling-modal {
    .page-top {
        padding-bottom: 20px;
        border-bottom: solid 1px #eee;
    }
    .page-title {
        font-weight: bold;
        font-size: 20px;
    }
    .table {
        background-color: #fff;
    }
}
</style>
